import React, { Component } from 'react';
import { Carousel, Button, Table, Image, Popconfirm, Upload, message, Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { getCarousel, delCarousel, updateCarousel, addCarousel } from '@/api/index';

export default class index extends Component {
  state = {
    imgs: [],
    currentID: '',
    visible: false,
    addVisible: false,
    file: {},
  };
  componentDidMount() {
    getCarousel().then((res) => {
      if (res.code === 200) {
        for (let key in res.data) {
          this.setState({
            imgs: [
              ...this.state.imgs,
              { key: key, carouselID: res.data[key].carouselID, src: res.data[key].src },
            ],
          });
        }
      }
    });
  }
  handleDel(ID) {
    delCarousel({ carouselID: ID });
  }
  handleUpdate() {
    let data = new FormData();
    data.append('file', this.state.file);
    data.append('carouselID', this.state.currentID);
    updateCarousel(data).then((res) => {
      if (res.code === 200) {
        this.setState({ visible: false });
        getCarousel().then((res) => {
          if (res.code === 200) {
            this.setState({ imgs: [] });
            for (let key in res.data) {
              this.setState({
                imgs: [
                  ...this.state.imgs,
                  { key: key, carouselID: res.data[key].carouselID, src: res.data[key].src },
                ],
              });
            }
            this.setState({ file: {} });
          }
        });
      }
    });
  }
  handleAdd() {
    let data = new FormData();
    data.append('file', this.state.file);
    addCarousel(data).then((res) => {
      if (res.code === 200) {
        this.setState({ addVisible: false });
        getCarousel().then((res) => {
          if (res.code === 200) {
            this.setState({ imgs: [] });
            for (let key in res.data) {
              this.setState({
                imgs: [
                  ...this.state.imgs,
                  { key: key, carouselID: res.data[key].carouselID, src: res.data[key].src },
                ],
              });
            }
            this.setState({ file: {} });
          }
        });
      }
    });
  }
  render() {
    const columns = [
      {
        title: '照片ID',
        dataIndex: 'carouselID',
        key: 'ID',
      },
      {
        title: '图片',
        dataIndex: 'src',
        key: 'image',
        render: (text) => <Image src={text} width={150} />,
      },
      {
        title: '路径',
        dataIndex: 'src',
        key: 'src',
      },
      {
        title: '操作',
        dataIndex: 'carouselID',
        key: 'opera',
        render: (record) => (
          <p>
            <Popconfirm
              placement="top"
              title="确定删除此图片"
              onConfirm={() => this.handleDel(record)}
            >
              <a>删除 </a>
            </Popconfirm>
            <a
              onClick={() => {
                this.setState({ visible: true, currentID: record });
              }}
            >
              更新
            </a>
          </p>
        ),
      },
    ];
    const props = {
      beforeUpload: (file) => {
        this.setState({
          file: file,
        });
        return false;
      },
    };
    let swipe = this.state.imgs.map((item, index) => {
      return (
        <div key={index}>
          <img src={item.src} width="100%" height={300} />
        </div>
      );
    });
    return (
      <div>
        <Carousel autoplay>{swipe}</Carousel>
        <Table dataSource={this.state.imgs} columns={columns} pagination={false} />
        <p style={{ textAlign: 'right' }}>
          <Button
            type="primary"
            onClick={() => {
              this.setState({ addVisible: true });
            }}
          >
            添加
          </Button>
        </p>
        <Modal
          title="更新图片"
          visible={this.state.visible}
          onCancel={() => {
            this.setState({ visible: false });
          }}
          onOk={() => this.handleUpdate()}
        >
          <Upload listType="picture" {...props}>
            {JSON.stringify(this.state.file) === '{}' ? (
              <div style={{ width: '470px', textAlign: 'center', border: '2px dashed #CED8F6' }}>
                <p>
                  <UploadOutlined style={{ fontSize: 100, color: '#5882FA' }} />
                </p>
                <p>点击或拖动图片上传</p>
              </div>
            ) : null}
          </Upload>
        </Modal>
        <Modal
          title="添加图片"
          visible={this.state.addVisible}
          onCancel={() => {
            this.setState({ addVisible: false });
          }}
          onOk={() => this.handleAdd()}
        >
          <Upload listType="picture" {...props}>
            {JSON.stringify(this.state.file) === '{}' ? (
              <div style={{ width: '470px', textAlign: 'center', border: '2px dashed #CED8F6' }}>
                <p>
                  <UploadOutlined style={{ fontSize: 100, color: '#5882FA' }} />
                </p>
                <p>点击或拖动图片上传</p>
              </div>
            ) : null}
          </Upload>
        </Modal>
      </div>
    );
  }
}
